<!--
 * @Description:  
 * @Author: YiHe
 * @Date: 2020-08-20 13:34:09
 * @LastEditors: YiHe
 * @LastEditTime: 2020-08-20 23:07:42
-->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>自制版mvvm</title>
</head>
<style>
	.one {
		width: 100px;
		height: 100px;
		background: red;
		transition: all .5s;
	}

	.two {
		width: 150px;
		height: 200px;
		background: goldenrod;
		transition: all .5s;
	}
</style>

<body>
	<div id="app">
		<div v-class="class">{{word}}</div>
		<button v-on:click="sayHi">change model</button>
	</div>
</body>

</html>
<script type="module">
	import MVVM from './js/mvvm.js'
	var vm = new MVVM({
		el: '#app',
		data: {
			word: '蒹葭苍苍,白露为霜',
			class: 'one'
		},
		methods: {
			sayHi: function () {
				this.word = '所谓伊人,在水一方'
				this.class = 'two'
			}
		}
	});
</script>